<template>
  <top />
  <nav v-if="!isNavNotShow" class="nav">
    <el-menu
      style="display: flex;justify-content: center;"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#0370c2"
      text-color="#e6f7ff"
      active-text-color="#ffffff"
      @select="handleSelect"
      :ellipsis="false"
      :popper-class="'menu-popper'"
      :popper-options="{
        modifiers: [
          {
            name: 'focus',
            enabled: true
          }
        ]
      }"
    >
      <template v-for="(item, index) in navList">
        <el-menu-item
          :key="index"
          v-if="item.children?.length === 0"
          :index="item.path"
          style="font-weight: bold;font-size: 16px;">
          {{item.title }}
        </el-menu-item>
        <el-sub-menu
          :key="index"
          v-if="item.children?.length > 0"
          :index="item.path"
          style="font-weight: bold; font-size: 16px;">
          <template #title><span style="font-weight: bold; font-size: 16px;">{{ item.title }}</span></template>
          <el-menu-item
            style="font-weight: bold;font-size: 16px;"
            v-for="subItem in item.children"
            :key="item.path + subItem.path"
            :index="item.path + subItem.path"
            >{{ subItem.title }}</el-menu-item
          >
          <el-menu-item
            style="font-weight: bold;font-size: 16px;" v-if="item.title === '成果转化'"
            @click="handleSearchClick"
          >
            成果搜索
          </el-menu-item>
        </el-sub-menu>
      </template>
      <div class="search">
        <el-autocomplete
          v-model="search_word"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          clearable
          class="inline-input w-50"
          placeholder="请输入文件名称"
          @select="handleSearch"
        >
          <template #append>
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
          </template>
        </el-autocomplete>
      </div>
    </el-menu>
  </nav>
  <div class="router-box m-b-20">
    <div class="cur-position p-t-10 p-b-10">当前位置：{{ curPosition }}</div>
    <keep-alive>
<router-view></router-view>
    </keep-alive>

  </div>
  <el-footer height="270px">
    <div class="foot-left">
      <div class="title">联系我们</div>
      <p>地址: 中国广西桂林市七星区六合路123号</p>
      <p>邮编: 541004</p>
      <p>传真: 0773-2290083</p>
    </div>
    <div class="foot-mid">
      <img :src="guetLogo" class="guet-logo" />
      <p>©版权所有：桂林电子科技大学</p>
      <a
        target="_blank"
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=45032302000104"
        class="beian-link"
      >
        <img src="@/assets/images/beian.png" class="beian-img" />
        <p class="beian-text">桂公网安备 45032302000104号</p>
      </a>
      <a class="icp-link" href="https://beian.miit.gov.cn/" target="_blank">桂ICP备2023002735号-1</a>
    </div>
    <div></div>
    <div class="foot-right">
      <div class="title">友情链接</div>
      <div class="link-container">
        <a href="https://www.guet.edu.cn/" Target="_blank">桂林电子科技大学</a>
      </div>
    </div>
  </el-footer>
</template>

<script setup lang="ts">
import { getFileList } from '@/api/file';
import { Search } from '@element-plus/icons-vue';
import top from '@/components/top/index.vue';
import guetLogo from '@/assets/svg/guet.svg';
import { Role } from '@/types/type';
import { getRoleKeys } from '@/utils/storage';
import { ref, reactive, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useDownload } from '@/hooks/useDownload';

const router = useRouter();
const route = useRoute();
const activeIndex = ref(route.path);
const handleSelect = (key: string, keyPath: string[]) => {
  router.push(key);
};
const roleKeys = getRoleKeys();
const search_word = ref('');
const navList = reactive([
  { title: '首页', path: '/home', children: [] },
  {
    title: '园区概况',
    path: '/park-service',
    children: [
      { title: '园区简介', path: '/park-introduce' },
      { title: '园区政策', path: '/park-policy' },
      { title: '机构设置', path: '/park-institution' },
      { title: '入园条件及流程', path: '/park-enter-step' },
      { title: '荣誉与资质', path: '/honor' },
    ],
  },
  {
    title: '信息动态',
    path: '/information-dynamic',
    children: [
      { title: '通知公告', path: '/notice-announcement' },
      { title: '园区动态', path: '/park-dynamics' },
      { title: '招商信息', path: '/investment-information' },
    ],
  },
  //企业服务
  {
    title: '企业服务',
    path: '/enterprise-service',
    children: [
      { title: '企业培育和孵化', path: '/foster' },
      { title: '咨询与服务', path: '/consult' },
      { title: '企业风采', path: '/enterprises' },
      { title: '创新创业培训', path: '/innovation-training' },
    ],
  },
  // { title: '消息', path: '/chat', children: [] },

  {
    title: '成果转化',
    path: '/transform',
    children: [
      { title: '需求列表', path: '/needs' },
      { title: '发布需求', path: '/publish-need' },
      { title: '科技成果', path: '/achievements' },
      { title: '发布成果', path: '/publish-achievement' },
    ],
  },
  {
    title: '资源共享',
    path: '/assets',
    children: [
      { title: '会议列表', path: '/meeting-list' },
      { title: '创建会议', path: '/create-meeting' },
      { title: '场地使用预约', path: '/room-list' },
      { title: '图书馆文献查询', path: '/library' },

      {
        title: '公共技术服务平台',
        path: '/public-service',
      },
    ],
  },
  //政策法规
  {
    title: '政策法规',
    path: '/policy-regulation',
    children: [
      { title: '地方政策法规', path: '/local-policy' },
      { title: '国家政策法规', path: '/country-policy' },
      { title: '知识产权法规', path: '/intellectual-property' },
      // { title: '项目申报', path: '/project-application' },
    ],
  },
  { title: '资料下载', path: '/download', children: [] },
  {
    title: '个人中心',
    path: '/personal-center',
    children: getPersonalCenterChildren(),
  },
]);

function getPersonalCenterChildren() {
  const children = [
    { title: '个人资料', path: '/profile' },
    { title: '企业入驻申请', path: '/enterprise-settlement' },
    { title: '企业毕业或退出', path: '/graduation-or-exit' },
    { title: '企业资料填报', path: '/fill-information' },
    { title: '企业需求栏', path: '/needs' },
    // { title: '我发布的成果', path: '/achievements' },
    // { title: '我预定的会议', path: '/meeting-list' },
    {title:'费用缴纳',path:'/payment'}
  ];
  return children;
}

const querySearch = (queryString: string, cb: any) => {
  const results = <any>[];
  getFileList({
    current: 1,
    size: 8,
    fileName: queryString,
  }).then((res: any) => {
    if (res.code === 200) {
      res.data?.records.forEach((item: any) => {
        results.push({
          value: item.filename,
          url: item.filepath,
        });
      });
      console.log(results);
      cb(results);
    }
  });
};

const handleSearch = (item: Record<string, any>) => {
  console.log(item);
  const { download } = useDownload();
  download(item.url);
};

// 控制nav是否显示
let isNavNotShow: boolean = true;
const curPath = computed(() => {
  return route.path;
});
const curPosition = ref<string>('');

watch(
  () => route.path,
  (newPath) => {
    isNavNotShow = route.meta.isNavNotShow ? true : false;
    // 更新activeIndex为当前路由路径
    // 对于子路由，需要匹配到对应的父级菜单项
    let matchedIndex = newPath;
    
    // 遍历导航列表，找到匹配的菜单项
    for (const navItem of navList) {
      // 检查是否是当前路径或其子路径
      if (newPath === navItem.path || newPath.startsWith(navItem.path + '/')) {
        matchedIndex = navItem.path;
        break;
      }
      
      // 检查子菜单项
      if (navItem.children && navItem.children.length > 0) {
        for (const subItem of navItem.children) {
          const fullSubPath = navItem.path + subItem.path;
          if (newPath === fullSubPath || newPath.startsWith(fullSubPath + '/')) {
            matchedIndex = fullSubPath;
            break;
          }
        }
      }
    }
    
    activeIndex.value = matchedIndex;
    // 记录当前位置
    const titleArr = route.matched.map((record) => record.meta.title);
    curPosition.value = titleArr.join(' / ');
  },
  {
    immediate: true
  }
);

// 成果搜索专用跳转方法
const handleSearchClick = () => {
  const newTab = window.open('https://bisheng.dataelem.com/chat/flow/b0d7596fb6a84d8f85672f2b1d7421d5', '_blank')
  if (!newTab) alert('请允许弹窗以打开成果搜索')
}
</script>

<style scoped lang="scss">
.nav {
  width: 100%;
  overflow: hidden;
  position: sticky;
  top: 50px;
  z-index: 999;
}
.cur-position {
  font-size: 16px;
}
.router-box {
  min-height: 700px;
  padding: 0 6%;
  background-color: rgba(255, 255, 255, 0.5);
  position: relative;
}
.search {
  margin-left: 30px;
  margin-top: 14px;
  width: 30%;
}
.el-footer {
  display: flex;
  background-color: #fafafa;
  padding: 70px 0;
  justify-content: center;
  background: url(@/assets/foot.jpg);
  color: white;
  .title {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 14px;
  }
  p {
    margin: 0;
    color: #b7bfc7;
    font-size: 12px;
  }
  .foot-left {
    height: 100%;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid #b7bfc7;
  }
  .foot-mid {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    a {
      color: #b7bfc7;

      text-decoration: none;
    }
  }
  .foot-right {
    padding-left: 4%;
    width: 20%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #b7bfc7;
    a {
      color: white;
      font-weight: bold;
      font-size: 14px;
      text-decoration: none;
    }
  }
}

.foot-left {
  .title {
    font-weight: bold;
    margin-bottom: 10px;
  }
}

.foot-mid {
  text-align: center;

  .guet-logo {
    margin-bottom: 1rem;
    width: 100px;
    height: auto;
  }

  .beian-link {
    display: inline-block;
    text-decoration: none;
    height: 20px;
    line-height: 20px;
  }

  .beian-img {
    float: left;
  }

  .beian-text {
    float: left;
    height: 20px;
    line-height: 20px;
    margin: 0 0 0 5px;
  }

  .icp-link {
    margin-left: 20px;
  }
}

.foot-right {
  .title {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .link-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-around;
  }
}

:deep(.menu-popper) {
  .el-menu--popup {
    .el-menu-item {
      &:focus {
        outline: none;
      }
    }
  }
}
</style>
